<template>
    <div>
        <!---->
        <div v-if="isPopuShow" class="panelPopu"  >
            <div  class="popu">
                <text  class="popu_button-text"   flex="1"      >{{min}}:{{sec}}</text>
                <image class="image" src="root:img/record.png"></image>
            </div>
        </div>

        <div class="panel">
            <div class="rectangle"  @touchstart="ontouchstart"  @touchend ="ontouchend" >
                <text  class="button-text"   flex="1"      >按下说话</text>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        props: {

        },
        data(){
            return{
                isPopuShow:false,
                min:"00",
                sec:"00",
                timeStamp:0,
                timer:undefined
            }

        },
        methods: {
            onLoad(){

            },
            ontouchstart () {
                this.isPopuShow=true;
                this.min="00";
                this.sec="00";
                var self  = this;
                self.timeStamp=0;
                this.start();
                this.timer=setInterval(function () {
                    self.timeStamp += +1;
                    var minZ = parseInt(self.timeStamp / 60);
                    var secZ = self .timeStamp% 60;
                    self.min = minZ < 10 ? "0" + minZ : minZ + "";
                    self.sec = secZ < 10 ? "0" + secZ : secZ + "";
                }, 1000)
            },
            ontouchend () {
                this.stop();
                this.isPopuShow=false;
                clearInterval(this.timer);
            },
            start(){
                let record=weex.requireModule('record')
                 record.start({channel:'mono',quality:'low'})
            },
            pause(){
                let record=weex.requireModule('record')
                record.pause()
            },
            stop(){
                let record=weex.requireModule('record')
                record.stop((res)=>{
                    this.$emit('recordCallBack',res,this.timeStamp);
                })

            },
        },
        mounted () {

        },
        created () {

        }
    }
</script>
<style scoped>

    .popu_button-text {
        color: #333333;
        font-size:32px;
    }
    .button-text {
        color: #333333;
        font-size:32px;
    }


    .panel{
        width: 750px;
        height: 80px;
        position: fixed;
        bottom: 30px;
        left: 0px;
        align-items: center;
        justify-content: center;
    }
    .panelPopu{
        width: 750px;
        height: 200px;
        align-items: center;
        justify-content: center;
        margin-top: 100px;
    }

    .rectangle{
        border-width: 1px;
        border-color: #cccccc;
        width: 500px;
        height:80px;
        align-items: center;
        justify-content: center;
    }
    .popu{
        width: 200px;
        height: 200px;
        border-width: 1px;
        border-color:  #cccccc;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .image{
        width: 100px;
        height: 100px;
        top: 10px;
    }

</style>